<template>
  <h1>El-开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch v-model="value2" class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  <el-switch v-model="value2" class="ml-2"
             style="--el-switch-on-color: orange; --el-switch-off-color: gray"/>
  <hr>
  是否为管理员:<el-switch v-model="isAdmin"></el-switch><hr>
  是否显示图片:<el-switch v-model="isShow"></el-switch><hr>
  <img src="fcq.jpg" width="200" v-show="isShow">
  数字字符串控制开关<el-switch v-model="numStr" :inactive-value="'0'" :active-value="'1'"></el-switch>
  数字控制开关<el-switch v-model="num" :inactive-value="0" :active-value="1"></el-switch>
</template>

<script setup>
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(false)
const isAdmin = ref(false);
const isShow = ref(false);

const numStr = ref('0');
const num = ref(0);
</script>

<style scoped>

</style>